<template>
	<view>
		<!-- 代办事宜 -->
		
	<!-- 	<view class="navw">
			
			<view class="viewbody" >
				<view @click="cbclick(0)" :class="[viewbodys[0]? 'viewboottom':'']">待处理</view>
			</view>
			<view class="viewbody" >
				<view @click="cbclick(1)" :class="[viewbodys[1]? 'viewboottom':'']">已处理</view>
			</view>
			// <view class="viewbody" >
				<view @click="cbclick(2)" :class="[viewbodys[2]? 'viewboottom':'']">已处理</view>
			</view> //
		</view> -->
		
		
		
		<view class="list">
			<view class="flex_col"  :class="{'active':pickerUserIndex==index}" @tap="listTap(item.time,item.name)"
			 v-for="(item,index) in userList"
			 :key="index" :data-index="index">
				<image :src="item.img" mode="aspectFill"></image>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.name}}</view>
						<view class="time">{{item.time}}</view>
					</view>
					<!-- <view class="info">{{item.info}}</view> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				userList: [],
				viewbodys:[true,false],
				/* 窗口尺寸 */
				winSize: {},
				/* 弹窗按钮列表 */
				popButton: [],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1
			}
		},
		//监听导航栏 点击事件
		onNavigationBarButtonTap(e) {
		    console.log("success")   
			console.log(e) 
			
		},
		onLoad(){
			_this=this;
			this.getListData();
			this.getWindowSize();
			
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
			

		},
		methods: {
			cbclick:function(e){
				let v=[];
				for (var i = 0; i <this.viewbodys.length; i++) {
					if(e==i){			
						v.push(true)
					}else{
						v.push(false)
					}
				}
				this.viewbodys=v;
				if(e==0){
					console.log("待处理")				
				}
				if(e==1){
					console.log("已处理")	
				}
				
											
			},
			/* 列表触摸事件 */
			listTap(gid,name) {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
				console.log("列表触摸事件触发"+gid)
				
			},
			/* 获取列表数据 */
			getListData() {
				let list = [];		
				const value = uni.getStorageSync("JSESSIONID");
				const val = uni.getStorageSync("pathHost");
				uni.request({
					url: val+"/ggcapp/oa/oaNotify/actTasks"+";JSESSIONID="+value+"?__ajax=true&mobileLogin=true",
					success: (data) => {
						
						console.log(data)
						
						for (let i = 0; i < data.data.actTasks.length; i++) {
							list.push({
								"name": data.data.actTasks[i].title,
								"time": data.data.actTasks[i].time.substring(0,10),
								"info": data.data.actTasks[i].userName,
								"img":"../../static/img/gongLog.png"
							})
						}
						
					},
				});
				
				this.userList = list; 
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},

		}
	}
</script>

<style  scoped lang="scss">
 page{
 	background-color: white;
 }
   /* 列式弹性盒子 */
   .flex_col {
   	display: flex;
   	flex-direction: row;
   	flex-wrap: nowrap;
   	justify-content: flex-start;
   	align-items: center;
   	align-content: center;
   }
   
   /* 弹性盒子弹性容器 */
   .flex_col .flex_grow {
   	width: 0;
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   .flex_row .flex_grow {
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   .flex_grow{
   	   overflow: hidden;
   	   text-overflow: ellipsis;
   	   white-space: nowrap;
   }
   /* 弹性盒子允许换行 */
   .flex_col.flex_wrap {
   	-ms-flex-wrap: wrap;
   	flex-wrap: wrap;
   }
   
   /* 列表 */
   .list {
   	background-color: #fff;
   	font-size: 28upx;
   	color: #333;
   	user-select: none;
   	touch-callout: none;
   
   	&>view {
   		padding: 24upx 30upx;
   		position: relative;
   
   		&:active,
   		&.active {
   			background-color: #f3f3f3;
   		}
   
   		image {
   			height: 80upx;
   			width: 80upx;
   			border-radius: 4px;
   			margin-right: 20upx;
   		}
   
   		&>view {
   			line-height: 40upx;
   
   			.time,
   			.info {
   				color: #999;
   				font-size: 24upx;
   			}
   
   			.time {
   				width: 150upx;
   				text-align: right;
   			}
   
   			.info {
   				overflow: hidden;
   				text-overflow: ellipsis;
   				white-space: nowrap;
   			}
   		}
   	}
   
   	&>view:not(:first-child) {
   		margin-top: 1px;
   
   		&::after {
   			content: '';
   			display: block;
   			height: 0;
   			border-top: #CCC solid 1px;
   			width: 620upx;
   			position: absolute;
   			top: -1px;
   			right: 0;
   			transform:scaleY(0.5);	/* 1px像素 */
   		}
   	}
   }
   
   /* 遮罩 */
   .shade {
   	position: fixed;
   	z-index: 100;
   	top: 0;
   	right: 0;
   	bottom: 0;
   	left: 0;
   	-webkit-touch-callout: none;
   
   	.pop {
   		position: fixed;
   		z-index: 101;
   		width: 200upx;
   		box-sizing: border-box;
   		font-size: 28upx;
   		text-align: left;
   		color: #333;
   		background-color: #fff;
   		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   		line-height: 80upx;
   		transition: transform 0.15s ease-in-out 0s;
   		user-select: none;
   		-webkit-touch-callout: none;
   		transform: scale(0, 0);
   
   		&.show {
   			transform: scale(1, 1);
   		}
   
   		&>view {
   			padding: 0 20upx;
   			overflow: hidden;
   			text-overflow: ellipsis;
   			white-space: nowrap;
   			user-select: none;
   			-webkit-touch-callout: none;
   
   			&:active {
   				background-color: #f3f3f3;
   			}
   		}
   	}
	
   }
   
   
   .navw{
   	   width: 100%;
   	   height: 90rpx;
   	   position: -webkit-sticky;
   	   position: sticky;
   	   top: 87rpx;
   	  z-index: 999;
	  display: flex;
   }
    .navw>.viewbody{
   		float: left;
   		width: 100%;
   		height:90rpx;
   		line-height: 90rpx;
   	  background-color: white;
   	  padding-left: 5%;
   	  padding-top: 3px;
   	}
   .viewbody>view{
   	   text-align: center;
   	    height: 100%;
   	    width: 80%;
	   flex: 1;
   	  
   }
   .viewboottom{
   	    border-bottom: 1px solid #71B6F7;
   		color:#71B6F7 ;
   }
   
   
   
   
   
   
   
</style>
